<template>
  <div class="checkbox-label-content">
    <div class="left-check">
      <el-checkbox
        class="left-box-all"
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
      >
        <template #default>
          <div class="model"></div>
        </template>
      </el-checkbox>
      <span class="img-box">
        <slot name="img"></slot>
      </span>
      <span class="title-box">
        <slot name="title"></slot>
      </span>
    </div>
    <div class="right-check">
      <el-checkbox-group
        class="groups-check"
        v-model="checkedCities"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox
          class="right-box-all"
          v-for="item in list"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          :title="item.name"
        >
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits } from "vue";
const checkAll = ref(true);
const isIndeterminate = ref(true);
const checkedCities = ref([]);

const props = defineProps({
  listp: {
    default: [],
    type: Array,
  },
  defaultSelect: {
    default: [],
    type: Array,
  },
});

let list = ref([]);
watch(
  () => props.listp,
  (newVal) => {
    list.value = newVal;
  },
  {
    deep: true,
    immediate: true,
  }
);

watch(
  () => props.defaultSelect,
  (newVal) => {
    checkedCities.value = newVal;
  },
  {
    deep: true,
    immediate: true,
  }
);

const handleCheckAllChange = (val) => {
  isIndeterminate.value = false;
  checkedCities.value = val ? list.value.map((item) => item.id) : [];
  isIndeterminate.value = false;
};
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === list.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < list.length;
};

const emit = defineEmits(["update:modelValue"]);
watch(
  checkedCities,
  (newVal) => {
    emit("update:modelValue", newVal);
  },
  {
    deep: true,
  }
);
</script>


<style lang="scss">
.checkbox-label-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: top;
  justify-content: space-between;
  .left-check {
    width: 134px;
    height: 120px;
    margin-right: 15px;
    background: url("/images/new/lcbg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    .img-box {
      display: block;
      text-align: center;
      width: 134px;
      height: 120px;
      padding-top: 20px;
      img {
        display: inline-block;
        width: 30px;
        height: 40px;
      }
    }
    .title-box {
      display: inline-block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 46px;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #ffffff;
      line-height: 56px;
    }
    .left-box-all {
      position: absolute;
      right: 11px;
      top: 11px;
      width: 20px;
      height: 20px;
      .model {
        width: 90px;
        height: 70px;
        background: red;
        position: absolute;
        left: -90px;
        top: 0px;
        opacity: 0;
      }
      .el-checkbox__inner {
        background: #005097 !important;
        border: 0 !important;
      }
      .is-checked {
        .el-checkbox__inner {
          background: url("/images/new/csed.png") !important;
          background-size: 100% 100% !important;
          border: 0 !important;
          &::after {
            display: none;
          }
        }
      }
    }
  }
  .right-check {
    flex: 1;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding: 10px 16px;
    background: url("/images/new/rcbg.png") no-repeat;
    background-size: 100% 100%;
    .groups-check {
      height: 100%;
      overflow: auto;
    }
    .right-box-all {
      .el-checkbox {
        width: 100%;
      }
      .el-checkbox__label {
        width: 240px;
        font-family: PingFangSC, PingFang SC;
        font-size: 21px;
        color: #ffffff !important;
        padding-left: 20px;
        white-space: nowrap;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .el-checkbox__inner {
        background: #005097 !important;
        border: 0 !important;
      }
      .is-checked {
        .el-checkbox__inner {
          background: url("/images/new/csed.png") !important;
          background-size: 100% 100% !important;
          border: 0 !important;
          &::after {
            display: none;
          }
        }
      }
    }
  }
}
</style>